<template>
    <div :style="carStyle">
        <div style="text-align: center;z-index: 2;">
            <div v-if="obj.tableData.showType == 1" class="statusinfo">
                <span :style="titleStyle">{{ obj.title }}</span>
                <span :style="valueStyle" v-if="obj.tableData.isShowValue"> {{ valFormat(value) }}</span>
                <span :style="unitStyle" v-if="obj.tableData.isShowValue"> {{ obj.tableData.unit }}</span>
                <span :style="textStyle" v-if="obj.tableData.isShowText"> {{ text }}</span>
            </div>
            <template v-else>
                <div class="card-title" :style="titleStyle" v-if="obj.tableData.showType == 2">{{ obj.title }}</div>
                <div v-if="obj.tableData.isShowValue">
                    <span :style="valueStyle">{{ valFormat(value) }}</span>
                    <span :style="unitStyle"> {{ obj.tableData.unit }}</span>
                </div>
                <div v-if="obj.tableData.isShowText" style="margin:8px 0;">
                    <span :style="textStyle"> {{ text }}</span>
                </div>
                <div :style="titleStyle" v-if="obj.tableData.showType == 3">{{ obj.title }}</div>
            </template>
        </div>
        <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl(obj)"></div>

        <!-- 显示图标内容 -->
        <template v-if="curentObj && curentObj.bgType == 1">
            <div class="statusicon">
                <template v-if="curentObj.iconGroup == 1">
                    <i class="iconfont icon-24gl-square" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-24gf-square" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 2">
                    <i class="iconfont icon-big-circle" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-yuan" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 3">
                    <i class="iconfont icon-xingzhuang-sanjiaoxing" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-zheng-triangle" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 4">
                    <i class="iconfont icon-wujiaoxing" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-star" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 5">
                    <i class="iconfont icon-lingxing1" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-lingxing" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 6">
                    <i class="iconfont icon-tx-tixing" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-tixing1" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 7">
                    <i class="iconfont icon-pentagon" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-wubianxing1" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 8">
                    <i class="iconfont icon-hexagon" v-if="curentObj.isNull" :style="figureStyle"></i>
                    <i class="iconfont icon-liubianxing2" v-else :style="figureStyle"></i>
                </template>
                <template v-if="curentObj.iconGroup == 99">
                    <div class="line" :style="lineStyle"></div>
                </template>
            </div>
        </template>
    </div>
</template>

<script>
// import { oneLoad, boardOneLoad } from '@/api/share'

export default {
    Name: "Status",
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: {
            type: Function,
            default: null,
        },
        getTableValue: Function,
    },
    data() {
        return {
            value: 0,
            text: "",
            carStyle: {},
            titleStyle: {},
            unitStyle: {},
            valueStyle: {},
            textStyle: {},
            // 用于比对数据是否修改
            dataStr: "",
            timer: null,
            time2: null,
            curentObj: false,
            filterForm: {},
            iconColor: "",
            figureStyle: {},
            lineStyle: {},
        }
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.obj.contactType > 0) {
                if (this.obj.contactType == 1 && this.obj.boardId) {
                    return true;
                }
                if (this.obj.contactType == 2 && this.obj.url) {
                    return true;
                }
            }
            return false;
        },
    },
    mounted() {
        this.setStyle();
        this.reloadInfo();

        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    methods: {
        reloadInfo() {
            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            // const end = new Date();
            // const start = new Date();
            if (this.obj.tableData.type != 1) {
                // this.filterForm.isOnlie = true;

                // // 查询一天内数据
                // start.setTime(start.getTime() - 3600 * 1000 * 24);
                // this.filterForm.beginTime = this.parseTime(start);
                // this.filterForm.endTime = this.parseTime(end);
            } else {
                // this.filterForm.isOnlie = false;

                // start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                // this.filterForm.beginTime = this.parseTime(start, "{y}-{m}-{d}");
                // this.filterForm.endTime = this.parseTime(end);

                // 刷新时间兼容处理
                if (timeSize < 60) {
                    timeSize = 60;
                }
            }

            clearInterval(this.timer);
            this.getFirstData();
            // this.getLineData();

            if (this.isReload) {
                this.timer = setInterval(() => {
                    // const end = new Date();
                    // this.filterForm.endTime = this.parseTime(end);

                    this.getLineData();
                }, timeSize * 1000);
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                fontSize: style.fontSize + "px",
                color: style.color,
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            };

            var data = this.obj.tableData;
            var unitSize = data.unitSize;
            var unitColor = data.unitColor;
            var unitFontWeight = data.unitFontWeight;
            var unitFontStyle = data.unitFontStyle;
            this.unitStyle = {
                fontSize: unitSize + "px",
                color: unitColor,
                fontStyle: unitFontStyle,
                fontWeight: unitFontWeight,
            };

            this.setStatusStyle();
        },
        getFirstData() {
            if (this.obj.tableData.tableId && this.obj.tableData.lineId) {
                var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.lineId, 1);
                if (result.code == 200) {
                    this.getLineData();
                } else {
                    var self = this;
                    window.setTimeout(function () {
                        self.getFirstData();
                    }, 500);
                }
            }
        },
        getLineData() {
            if (this.obj.tableData.tableId && this.obj.tableData.lineId) {
                var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.lineId, 1);
                if (result.code == 200) {
                    this.value = result.data;
                    this.setStatusStyle();
                } else {
                    // this.filterForm.tableId = this.obj.tableData.tableId;
                    // this.filterForm.structureId = this.obj.tableData.lineId;

                    // if (this.obj.tableData.type != 1) {
                    //     oneLoad(this.filterForm).then((res) => {
                    //         if (res.data.code == 0) {
                    //             this.value = res.data.data;
                    //             this.setStatusStyle();
                    //         } else {
                    //             console.error(res.data.message)
                    //         }
                    //     }).catch(() => {
                    //         clearInterval(this.timer)
                    //     });
                    // } else {
                    //     boardOneLoad(this.filterForm).then((res) => {
                    //         if (res.data.code == 0) {
                    //             this.value = res.data.data;
                    //             this.setStatusStyle();
                    //         } else {
                    //             console.error(res.data.message)
                    //         }
                    //     }).catch(() => {
                    //         clearInterval(this.timer)
                    //     });
                    // }
                }
            }
        },
        setStatusStyle() {
            var value = this.value;
            var data = this.obj.tableData;
            var self = this;
            var timeSize = 500;
            if (this.obj.tableData.shanTime) {
                timeSize = this.obj.tableData.shanTime * 1000;
            }

            if (data.statusList.length) {
                var color = "";
                var text = "";
                var valSize = "";
                var valColor = this.obj.style.color;
                var valFontWeight = "";
                var valFontStyle = "";
                var textSize = "";
                var textColor = "";
                var textFontWeight = "";
                var textFontStyle = "";
                var backgroundImage = "";

                var isTwinkle = false;
                this.curentObj = false;
                data.statusList.forEach(e => {
                    // 如果设置空状态
                    if (e.value == "" && this.value == "") {
                        backgroundImage = `url(${e.backgroundImage}`;
                        color = e.backgroundColor;
                        text = e.text;
                        valSize = e.valSize;
                        valColor = e.valColor;
                        valFontWeight = e.valFontWeight;
                        valFontStyle = e.valFontStyle;
                        textSize = e.textSize;
                        textColor = e.textColor;
                        textFontWeight = e.textFontWeight;
                        textFontStyle = e.textFontStyle;

                        isTwinkle = e.isTwinkle;

                        // 找到符合条件的状态值配置
                        self.curentObj = e;
                    } else if (value != "" && Number(value) >= Number(e.value)) {
                        backgroundImage = `url(${e.backgroundImage}`;
                        color = e.backgroundColor;
                        text = e.text;
                        valSize = e.valSize;
                        valColor = e.valColor;
                        valFontWeight = e.valFontWeight;
                        valFontStyle = e.valFontStyle;
                        textSize = e.textSize;
                        textColor = e.textColor;
                        textFontWeight = e.textFontWeight;
                        textFontStyle = e.textFontStyle;

                        isTwinkle = e.isTwinkle;

                        // 找到符合条件的状态值配置
                        self.curentObj = e;
                    }
                })

                // 线条样式
                if (this.curentObj.iconGroup == 99) {
                    this.lineStyle = {
                        height: this.curentObj.weight + "px",
                        backgroundColor: this.curentObj.iconColor,
                        transformOrigin: "center center",
                        transform: `rotate(${this.curentObj.rotate}deg)`
                    }
                } else {
                    // 图形样式
                    this.figureStyle = {
                        fontSize: this.obj.style.width - 5 + "px",
                        color: this.curentObj.iconColor,
                    }

                    // #region 文字投影
                    var textShadow = "";
                    if (this.curentObj.textShadow) {
                        textShadow = `${this.curentObj.textShadow.h}px ${this.curentObj.textShadow.v}px ${this.curentObj.textShadow.blur}px ${this.curentObj.textShadow.color}`
                    }
                    this.figureStyle.textShadow = textShadow;
                    // #endregion

                }

                var self = this;
                this.text = text;
                this.carStyle.backgroundImage = backgroundImage;
                clearInterval(this.time2)
                if (color.length) {
                    this.carStyle.backgroundColor = color;
                }
                if (isTwinkle) {
                    this.time2 = setInterval(function () {
                        if (self.curentObj.twinkleType && self.curentObj.twinkleType == 1) {
                            if (self.curentObj.bgType == 1) {
                                // 图形闪烁
                                if (self.figureStyle.color == self.curentObj.iconColor) {
                                    self.figureStyle.color = color;
                                } else {
                                    self.figureStyle.color = self.curentObj.iconColor;
                                }

                                // 线条闪烁
                                if (self.lineStyle.backgroundColor == self.curentObj.iconColor) {
                                    self.lineStyle.backgroundColor = color;
                                } else {
                                    self.lineStyle.backgroundColor = self.curentObj.iconColor;
                                }
                            } else {
                                if (self.carStyle.backgroundImage == backgroundImage) {
                                    self.carStyle.backgroundImage = "";
                                } else {
                                    self.carStyle.backgroundImage = backgroundImage;
                                }
                            }
                        } else {
                            if (self.carStyle.backgroundColor == color) {
                                self.carStyle.backgroundColor = self.obj.style.backgroundColor;
                            } else {
                                self.carStyle.backgroundColor = color;
                            }
                        }
                    }, timeSize)
                }

                this.valueStyle = {
                    fontSize: valSize + "px",
                    color: valColor,
                    fontStyle: valFontStyle,
                    fontWeight: valFontWeight,
                };
                this.textStyle = {
                    fontSize: textSize + "px",
                    color: textColor,
                    fontStyle: textFontStyle,
                    fontWeight: textFontWeight,
                };

                // this.obj.tableData.value = value;
            }
        },
        // 计算精度
        valFormat(value) {
            if (value != "" && value != null && this.obj.tableData.decimal >= 0) {
                return Number(value).toFixed(this.obj.tableData.decimal);
            }
            return value;
        },
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();

                // 数据改变了 动态更新echart
                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    if (this.obj.tableData.tableId) {
                        this.reloadInfo();
                    }
                }
            }
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>

<style scoped>
.line {
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -1px;
}

.hline {
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -1px;
}

.statusicon {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>